<template>
	<view class="container bottom-ios">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">实名认证</text>
		</uni-nav-bar>
		<view class="body mt20">
			<view class="form-item flex-c">
				<text class="text-primary">真实姓名</text>
				<view class="input-box flex-r ac">
					<input class="input" type="text" placeholder="请输入真实姓名，绑定后不可修改" v-model="form.name" :maxlength="25">
				</view>
			</view>
			<view class="form-item flex-c">
				<text class="text-primary">身份证号</text>
				<view class="input-box flex-r ac">
					<input class="input" type="idcard" placeholder="请输入身份证号码，15-18位，绑定后不可修改" v-model="form.cardid" :maxlength="18">
				</view>
			</view>
			<view class="form-item flex-c">
				<text class="text-primary">手机号</text>
				<view class="input-box flex-r ac">
					<text class="text-secondary">+86</text>
					<input class="input border-left" type="number" placeholder="请输入手机号码" v-model="form.mobile" :maxlength="11" step="1" @input="inputPhone">
				</view>
			</view>
			<view class="form-item flex-c">
				<text class="text-primary">手机验证码</text>
				<view class="input-box flex-r ac">
					<input class="input" type="number" placeholder="请输入验证码" :focus="codefocus" v-model="form.smscode" :maxlength="6" step="1" @input="inputCode">
					<text class="text-secondary color-blue" @touchend.prevent="sendSmsCode" @tap="sendSmsCode">{{sendText}}</text>
				</view>
			</view>
			<view class="privacy flex-r ac" @tap="privacyCheck = !privacyCheck">
				<image class="select-icon" :src="privacyCheck ? require('@/public/images/bar/xy_xz.png') : require('@/public/images/bar/xy_wxz.png')" mode="widthFix"></image>
				<text>我已阅读并接受</text><text class="color-blue" @tap.stop="$CHS.goAbout('service')">《用户服务协议》</text><text class="color-blue" @tap.stop="$CHS.goAbout('privacy')">《隐私政策》</text>
			</view>
			<view class="submit-box">
				<button type="default" :class="{'active': canSubmit}" :loading="loading" @tap="submit">确认</button>
			</view>
			<text class="text-box text-small color-grey">
				温馨提示:
				1、姓名、身份证、绑定手机实名认证的姓名必须一致；
				2、请谨慎填写，资料确认绑定后不提供修改。\n
				球吧公约:
				欢迎来到有趣又有爱专业的球吧彩虹体育，每条评论背后都是一名真实的朋友,评论他人时，我们希望你了解彩虹体育球吧以下原则：
				1、面对不同观点，就事论事，不上升到人身攻击，不地域攻击；
				2、不强求互相说服，求同存异；
				3、遇到不友好言论，选择举报，不花费时问精力纠缠
				一个有趣有爱的球吧，需要你一起守护，感谢(*^ ^*）
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'articlepublish',
				privacyCheck: false,
				codefocus: false,
				loading: false,
				sendText: '获取验证码',
				form: {
					cardid: null,
					name: null,
					mobile: null,
					smscode: null
				}
			};
		},
		computed: {
			canSend() {
				return this.form.mobile && this.form.mobile.length == 11 && /^[1][3-9][\d]{9}/.test(this.form.mobile)
			},
			canSubmit() {
				let flag = true
				for(let key in this.form){
					if(!this.form[key]){
						flag = false
						break
					}
				}
				return flag && this.canSend && this.form.smscode.length == 6 && this.privacyCheck
			}
		},
		onLoad() {
			if(!this.$store.state.user.isRealNameAuth){
				this.form.mobile = this.$store.state.user.phone
			}else{
				console.log('非法请求');
				uni.showToast({
					title: '请求数据错误，请返回重试',
					icon: 'none'
				})
				this.$goBack(1)
			}
		},
		methods: {
			submit() {
				if(this.isSubmit || !this.canSubmit) {
					if(!this.privacyCheck) {
						uni.showToast({
							title: '请阅读并接受用户服务协议与隐私政策',
							icon: 'none',
						})
					}else{
						uni.showToast({
							title: '请填写所有内容',
							icon: 'none'
						})
					}
					return
				}
				this.isSubmit = true
				this.loading  = true
				this.$http.post({
					url: '/api/user/auth/add',
					data: this.form
				}).then(data => {
					console.log(data);
					if(data.success){
						this.$ShowToast({text: '实名认证成功', type: 1})
						this.$store.commit('UPDATE_USERINFO', {isRealNameAuth: true})
						this.$goBack(1)
					}else{
						uni.showToast({
							title: data.message || '实名认证失败',
							icon: 'none'
						})
					}
				}).catch((err)=>{
					console.log(err);
				}).finally(()=>{
					this.isSubmit = false
					this.loading = false
				})
			},
			//发送短信验证码
			sendSmsCode() {
				if(!this.canSend){ //确认是否输入正确的手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return
				}
				if(this.isSend){ //防止重复发送
					return
				}
				this.isSend = true
				this.sendText = '发送中...'
				this.$CHS.sendSmsCode({
					phone: this.form.mobile,
					term: 'user',
					type: 0 //0 .登录模板、1.注册模板、2.忘记密码模板
				}).then((res)=>{
					let time = 60
					this.sendText = '重新获取 ' + time + 's'
					this.timer = setInterval(()=>{
						time = time - 1
						if(time === 0){
							clearInterval(this.timer)
							this.isSend = false
							this.timer = null
							this.sendText = '获取验证码'
						}else{
							this.sendText = '重新获取 ' + time + 's'
						}
					}, 1000)
					this.codefocus = true
				}).catch((err)=>{
					this.isSend = false
					this.sendText = '获取验证码'
				})
			},
			//输入手机号
			inputPhone(e) {
				if(e.detail.value && e.detail.value.length == 11){
					if(/^[1][3-9][\d]{9}/.test(e.detail.value)){
						this.codefocus = true
					}else{
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					}
				}
			},
			//输入验证码
			inputCode(e) {
				if(e.detail.value && e.detail.value.length == 6){
					this.codefocus = false
					uni.hideKeyboard()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		background-color: #FFFFFF;
		padding: 0 20rpx 30rpx;
		box-sizing: border-box;
		min-height: calc(var(--safe-height) - #{$navbar-height} - 20rpx);
		.form-item{
			.text-primary{
				margin-top: 30rpx;
				font-weight: 500;
			}
			.input-box{
				margin-top: 10rpx;
				height: 88rpx;
				border-bottom: 1rpx solid #ededed;
				box-sizing: border-box;
				.input{
					flex: 2;
					height: 40rpx;
					font-size: 28rpx;
					/deep/ .input-placeholder{
						font-size: 26rpx;
						color: #B3B3B3;
					}
				}
				.border-left{
					margin-left: 20rpx;
					padding-left: 20rpx;
					border-left: 1rpx solid #CCCCCC;
				}
			}
		}
		.privacy{
			margin-top: 20rpx;
			.select-icon{
				margin-right: 10rpx;
				width: 32rpx;
			}
		}
		.submit-box{
			margin: 40rpx 0;
		}
		.text-box{
			line-height: 36rpx;
		}
	}
</style>
